<template>
  <div>
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="75" sortable></el-table-column>
      <el-table-column prop="display_name" label="角色名称" sortable></el-table-column>
      <el-table-column prop="description" label="角色描述" sortable></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="roleSet(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-col>
    <Roledialog ref="roledialog"></Roledialog>
  </div>

</template>
<script>
    import Roledialog from "./roledialog";
    export default {
      name: "role",
      components: {Roledialog},
      data(){
        return {
          activityList : [],
          tabtitle: '添加角色',
          permissionsList: [],
          total: 0,
          page_id: 1,
          pagesize: 10,
        }
      },
      mounted(){
        this.getPermissionsList();
        this.getRoleList();
      },
      methods: {
        //获取角色列表
        async getRoleList(){
          const res = await this.$api.getRoleList();
          if (res.data.level == 'success'){
            this.activityList = res.data.data;
            this.total = res.data.page_info.total;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //获取角色详情
        async roleSet(id){
          this.tabtitle = "编辑角色";
          let params = {
            id : id
          }
          const res = await this.$api.roleSet(params);
          if (res.data.level == 'success'){
            this.$refs.roledialog.roleValue = res.data.data;
            this.$refs.roledialog.addFormVisible = true;
          }
        },
        //添加角色
        async setRole(){
          let params = this.$refs.roledialog.roleValue;
          const res = await this.$api.setRole(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.getRoleList();
            this.tabtitle = "添加角色";
            this.$refs.roledialog.addFormVisible = false;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //删除角色
        async delRole(id){
          let params = {
            id : id
          }
          const res = await this.$api.delRole(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.getRoleList();
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //获取权限列表
        async getPermissionsList(){
          const res = await this.$api.getPermissionsList();
          if (res.data.level == 'success'){
            this.permissionsList = res.data.data;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //分页按钮显示
        currentChange(id){
          this.page_id = id;
          this.getBannerList();
        }
      }
    }
</script>

<style scoped>

</style>
